<template>
    <div>
      <TimePickerSt @time-range-selected="handleTimeSelected"></TimePickerSt>
      <div style="height: 10px">
      <strong style="display: block; text-align: center; font-size: 40px"
        >水淹</strong
      >
    </div>
      <div class="box">
        <div class="chart">
          <div id="charts" ref="chart">
            <!-- 显示 radarPic 图片 -->
            <img :src="strongrainImageUrl" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import TimePickerSt from "./TimePickerSt";
  import api from "../api/user/strongrain.js";
  
  export default {
    name: "radarPic",
    components: { TimePickerSt},
    data() {
      return {
        strongrainImageUrl: "", // 用于存储 Yuntu 图片的 URL
        selectedTimes: [], // 用于存储选择的时间列表
      };
    },
    methods: {
      async handleTimeSelected(timeData) {
        const totalMinutes = parseInt(timeData.start);
        const hour = parseInt(timeData.start.split(":")[0]);
        const minute = parseInt(timeData.start.split(":")[1]);
  
        const year = parseInt(timeData.date.split("-")[0]);
        const month = parseInt(timeData.date.split("-")[1]);
        const day = parseInt(timeData.date.split("-")[2]);
  
        try {
          // 使用您的API文件中的方法来获取Yuntu图片数据
          const response = await api.getstrongrainData(year, month, day, hour, minute);
  
          // 确保响应成功
          if (response.status === 200) {
            // 创建一个Blob对象
            const blob = new Blob([response.data], { type: "image/jpg" });
  
            // 创建一个对象URL以在<img>标签中显示图像
            const imageUrl = URL.createObjectURL(blob);
  
            // 更新组件中的yuntuImageUrl
            this.strongrainImageUrl = imageUrl;
  
            // 将选择的时间添加到列表中
            const formattedTime = `${year}-${month}-${day} ${hour}:${minute}`;
            this.selectedTimes.push(formattedTime);
          } else {
            console.error("Error fetching Yuntu image:", response.statusText);
          }
        } catch (error) {
          console.error("Error fetching Yuntu image:", error);
        }
      },
    },
    mounted() {
    // 页面初始化时手动触发一次时间选择事件，以获取默认时间点的云图
    const defaultTimeData = {
      date: "2023-08-02", // 默认日期
      start: "00:00", // 默认时间
    };
    this.handleTimeSelected(defaultTimeData);
  },
  };
  </script>
  
  <style scoped lang="scss">
  @media screen and (min-width: 700px) {
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .chart {
      border: 3px double #c7e8ff;
      background-color: #fff;
      margin: 60px;
      width: 53%;
      height: 65vh;
  
      #charts {
        width: 100%;
        height: 65vh;
      }
      img {
        max-width: 100%;
        max-height: 100%;
        display: block;
      }
    }
  }
  </style>
  